<!-- eslint-disable vue/html-indent  -->
<template>
  <g>
    <!--      机柜-->
    <svg
      t="1725505767481"
      class="icon"
      viewBox="0 0 1804 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="979"
      width="60"
      height="60"
      cursor="pointer"
    >
      <path cursor="pointer" d="M31 50v529h1741V50z" fill="rgba(22, 10, 29, 0)" p-id="1663"></path>
      <path d="M31 50v529h1741V50H31zM0 19h1804v592H0V19z" fill="#1296db" p-id="981"></path>
      <path
        v-if="['2', '3'].includes(props.cabinetType || '')"
        d="M1586 31h31v560h-31z"
        fill="#1296db"
        p-id="982"
      ></path>
      <path
        v-if="['1', '3'].includes(props.cabinetType || '')"
        d="M186 31h31v560h-31zM1586"
        fill="#1296db"
        p-id="983"
      ></path>
    </svg>
    <!--      温湿度计-->
    <svg
      v-if="props.imeasureType !== '0'"
      :x="
        ['1', '3'].includes(props.imeasureType || '')
          ? props.imeasureType === '1'
            ? -42
            : -52
          : 60
      "
      y="13"
      t="1725521345812"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2051"
      width="20"
      height="20"
    >
      <path
        d="M195 628V165a80 80 0 0 1 79-80 79 79 0 0 1 79 79v459c0 0 56 23 56 23V165C412 89 351 28 275 28c-75 0-136 61-136.874667 136.920178v483.259734s56.888889-17.430756 56.888889-20.445867zM62.748444 763.130311c0 118.897778 96.733867 215.222044 216.007112 215.222045 119.273244 0 216.007111-96.324267 216.007111-215.222045 0-82.978133-47.581867-157.457067-121.014045-193.3312l-18.170311 37.205333c0.273067-0.159289 0.455111 17.328356 0.273067 17.590045 50.062222 27.625244 82.0224 80.224711 82.0224 138.535822 0 87.415467-71.213511 158.333156-159.118222 158.333156-87.904711 0-159.118222-70.917689-159.118223-158.333156 0-55.955911 29.411556-106.780444 76.401778-135.281778 0.056889 0.136533-0.318578-12.538311-0.352711-12.424533l-22.414222-40.129422C105.585778 613.080178 62.737067 684.361956 62.737067 763.130311z"
        fill="#1296db"
        p-id="2052"
      ></path>
      <path
        d="M250.311111 742.968889a28.444444 28.444444 0 1 0 56.888889 0V264.135111a28.444444 28.444444 0 1 0-56.888889 0V742.968889z"
        :fill="temColor(props.tem)"
        p-id="2053"
      ></path>
      <path
        d="M220.137244 768.955733a58.618311 58.368 0 1 0 117.236623 0 58.618311 58.368 0 1 0-117.236623 0Z"
        :fill="temColor(props.tem)"
        p-id="2054"
      ></path>
      <path
        v-if="['3', '4'].includes(props.imeasureType || '')"
        d="M955.733333 741.7856c0-50.972444-28.512711-128.568889-70.576355-202.478933-44.782933-78.665956-90.077867-130.673778-128.705422-130.673778-38.638933 0-83.933867 51.996444-128.705423 130.673778-42.075022 73.898667-70.576356 151.517867-70.576355 202.478933C557.169778 853.560889 646.257778 944.355556 756.451556 944.355556 866.633956 944.355556 955.733333 853.549511 955.733333 741.7856z m-341.674666 0c0-38.786844 25.520356-108.282311 63.123911-174.341689 17.646933-30.993067 36.408889-58.379378 53.134222-77.596444 8.066844-9.250133 15.36-16.270222 21.367467-20.662045 2.446222-1.786311 4.471467-2.980978 5.916444-3.606755 0.329956-0.136533-0.034133-0.056889-1.149155-0.056889-1.1264 0-1.479111-0.079644-1.160534 0.056889 1.444978 0.625778 3.4816 1.820444 5.916445 3.606755 6.007467 4.391822 13.312 11.411911 21.367466 20.662045 16.736711 19.217067 35.498667 46.603378 53.134223 77.596444C873.324089 633.514667 898.844444 702.998756 898.844444 741.7856 898.844444 822.363022 834.9696 887.466667 756.451556 887.466667c-78.518044 0-142.392889-65.103644-142.392889-145.681067z"
        fill="#1296db"
        p-id="2055"
      ></path>
      <path
        v-if="['3', '4'].includes(props.imeasureType || '')"
        d="M770.696533 659.137422a211.740444 211.740444 0 0 1 14.904889 20.969245c14.222222 22.869333 21.788444 45.169778 20.081778 63.806577-1.501867 16.406756-10.171733 30.651733-29.354667 43.736178a28.444444 28.444444 0 1 0 32.017067 47.012978c32.995556-22.482489 50.915556-51.928178 53.987556-85.560889 3.049244-33.28-8.260267-66.628267-28.421689-99.032178-10.365156-16.668444-20.753067-29.536711-28.114489-37.319111a28.444444 28.444444 0 1 0-41.301334 39.128178c1.046756 1.092267 3.242667 3.584 6.200889 7.259022z"
        fill="#1296db"
        p-id="2056"
      ></path>
    </svg>
    <text
      v-if="props.imeasureType !== '0'"
      :x="
        ['1', '3'].includes(props.imeasureType || '')
          ? props.imeasureType === '1'
            ? -32
            : -32
          : 80
      "
      :y="['1', '2'].includes(props.imeasureType || '') ? 27 : 23"
      :font-size="props.temSize"
      :fill="temColor(props.tem)"
      >{{ props.tem }}℃
    </text>
    <text
      v-if="['3', '4'].includes(props.imeasureType || '')"
      :x="['3'].includes(props.imeasureType || '') ? -31 : 80"
      y="33"
      :font-size="props.humSize"
      fill="rgb(200, 220, 200)"
      >{{ props.hum }}%
    </text>
    <text
      x="10"
      y="27"
      :font-family="props.fontFamily"
      :font-size="props.fontSize"
      :fill="props.fill"
      >{{ props.text }}
    </text>
  </g>
</template>
<script setup lang="ts">
  import { temColor } from '@/utils';
  const props = defineProps({
    fontFamily: {
      type: String,
      default: ''
    },
    fontSize: {
      type: Number,
      default: 10
    },
    cabinetType: {
      type: String,
      default: ''
    }, // 机柜类型
    imeasureType: {
      type: String,
      default: ''
    }, // 测量类型
    text: {
      type: String,
      default: ''
    },
    fill: {
      type: String,
      default: ''
    },
    tem: {
      type: Number,
      default: 10
    },
    temSize: {
      type: Number,
      default: 9
    },
    hum: {
      type: Number,
      default: 10
    },
    humSize: {
      type: Number,
      default: 9
    }
  });
</script>
